{extend name='public/form'/}
<!-- 表单字段 -->
{block name='fields'}
{:token_field()}
<div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
    <div class="layui-input-block">
        <input type="text" name="title" value="" required lay-verify="required" placeholder="请输角色名称"
            autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">权限菜单</label>
    <div class="layui-input-block">
        <div id="dataTree"></div>
    </div>
</div>
{/block}
<!-- js -->
{block name='js'}
<script>
    layui.use(['tree'], function (args) {
        var tree = layui.tree
            , $ = layui.jquery;

        var data = {$menus|raw};

        // 树形组件
        tree.render({
            elem: '#dataTree',
            checkChirld: false,
            data: data,
            showCheckbox: true,
        });
        $('#dataTree').find('input[type="checkbox"]').each(function () {
            $(this).attr('name', 'tree[]');
        });
    });
</script>
{/block}